<template>
	<view class="ownerlist">
		<!--  -->
		<view class="owner" v-for="(item,index) in list" :key="index" 
		@click="tourl('/pages/appointment/storeInfo?id='+item.id)"
		>
			<view class="img" >
				<image :src="item.avatar" mode="aspectFill"></image>
				
			</view>
			<view class="txt">
				<view class="name">
					<text>{{item.name || "小程序用户"}}</text>
					 
				
					<image v-if="item.isCollect==0" @click.stop="handleCollect('create',item,index)"
					src="@/static/home/homelist/sc02.png" mode="widthFix"></image>
					<image v-else @click.stop="handleCollect('delete',item,index)"
					src="@/static/home/homelist/sc01.png" mode="widthFix"></image>
					
					<image v-if="item.isCoupon==1" src="@/static/home/homelist/yhj.png" mode="widthFix"></image>
					 
				</view>
				<view class="tip" v-if="item.workTags">
					<text class="text" v-for="it in item.workTags.split(',')" :key="it">
						{{it}}
					</text> 
				</view>
				<view class="tip">
					<text class="text2">入驻{{item.yearsAgo}}年｜总接单 {{item.orderNum}}｜粉丝 {{item.fansNum}}</text>
					 
				</view>
				<view class="tip">
					<image v-if="item.trainingCertification==1" src="../static/home/homelist/pxrz.png" mode="widthFix"></image>
					<image v-if="item.trainingCertification==0" src="../static/home/homelist/zdgj.png" mode="widthFix"></image>
				</view>
			</view>
		
			<view class="appointment">
				<view class="time">
					<view class="t1">营业时间 </view>
					<view class="t2">{{item.startTime}}</view>
				</view>
				 
			</view>
		</view>
	</view>
	
</template>

<script>
	import {merchantscAPI,merchantscdelAPI} from "@/api/appointment.js"
	export default {
		name:"home-list",
		data() {
			return {
				list: [ ],
			};
		},
		created() {
			
		},
		methods:{
			handleCollect(url,item,index){
				let action=url=='create'? merchantscAPI :merchantscdelAPI
				action({
					merchantId:item.id,
					
				}).then(res=>{
					console.log(res)
					this.$set(this.list[index],'isCollect',url=='create'? '1':'0')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.ownerlist{
	padding: 20rpx; 
	.owner{
		display: flex;
		background-color: #fff;  
		border-radius:20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.img{
			width: 160rpx;
			height: 200rpx;
			overflow: hidden;
			border-radius: 20rpx;
			margin-right: 20rpx; 
			background-color: #f1f1f1;
			image{
				border-radius: 20rpx;
				height: 200rpx; 
				width: 100%;
			}
		}
		.txt{
			padding: 10rpx 2rpx;
			flex: 1;
			.name{
				font-weight: bold;
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin: 0 15rpx;
				} 
			}					 
			.tip{
				display: flex;
				align-items: center; 
				margin-top: 15rpx;
				flex-wrap: wrap;
				.text{
					padding: 8rpx 12rpx; 
					background: #F5F5F5;
					border-radius:4rpx;
					margin: 5rpx;
					font-size: 20rpx;
					color: #999999;
					line-height: 23rpx;
				}
				.text2{
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 23rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				image{
					width: 128rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
		
		.appointment{
			width: 110rpx;
			.time{
				width: 104rpx;
				height: 88rpx;
				border-radius: 12rpx;
				border: 1rpx solid #277EEF;
				text-align: center;
				.t1{
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 43rpx;
					text-align: center; 
					background: #277EEF;
					border-radius: 12rpx 12rpx 0rpx 0rpx;
				}
				.t2{
					font-weight: bold;
					font-size: 20rpx;
					color: #277EEF;
					line-height: 43rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
			.address{
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-top: 20rpx;
				text-align: center;
				 
			}
		}
	
	}
}
</style>